<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import { GET_LOGIN_IMG, DO_LOGIN, type ILogin } from '@/api/login'
import { useRouter } from 'vue-router'
import { GET_STAFF_INFO } from '@/api/staff'
import useUser, { type IUser } from '@/stores/useUser'
import { GET_PORT_VIEW } from '@/api/port'

const formData = ref({
  userName: '',
  password: '',
  caphe: ''
})
const { setUserInfo } = useUser()
const rules = reactive({
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  caphe: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})
const router = useRouter()
const formRef = ref()
const imgUrl = ref('')
// const submitForm = async (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   await formEl.validate((valid, fields) => {
//     if (valid) {
//       console.log('submit!')
//     } else {
//       console.log('error submit!', fields)
//     }
//   })
// }
const getStaffDetail = (id: string) => {
  GET_STAFF_INFO(id).then(async (res) => {
    const userInfo = res.data[0] || {}
    await getViewAuth(userInfo.port, userInfo)
  })
}
const getViewAuth = (id: string, userInfo: IUser) => {
  GET_PORT_VIEW(id).then((res) => {
    const authCodes = res.data.map((item: any) => item.view_name)
    setUserInfo({
      ...userInfo,
      authCodes
    })
    router.push('/home')
  })
}
const doLogin = async () => {
  // ElMessage.success('登录中')
  await formRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true
      let params: ILogin = {
        username: formData.value.userName,
        password: formData.value.password,
        captcha: formData.value.caphe
      }
      DO_LOGIN(params)
        .then(async (res: any) => {
          console.log(res)
          loading.value = false
          localStorage.setItem('token', res.token)
          await getStaffDetail(res.id)
        })
        .catch(() => {
          getImage()
          loading.value = false
        })
    } else {
      getImage()
    }
  })
}
const loading = ref(false)
// 获取图形验证码
const getImage = () => {
  GET_LOGIN_IMG().then((res: any) => {
    imgUrl.value = res
  })
}
getImage()
const imgCode = computed(() => {
  return imgUrl.value.replace(/height="\d+"/, 'height="20"').replace(/width="\d+"/, 'width="100"')
})
</script>

<template>
  <div class="main-page">
    <el-form class="login-form" ref="formRef" :model="formData" label-width="80px" :rules="rules">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="formData.userName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="caphe">
        <el-input v-model="formData.caphe" placeholder="请输入验证码" class="check-code-input">
          <template #append>
            <span class="img-code" @click="getImage" v-html="imgCode"></span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" @click="doLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped lang="scss">
.main-page {
  height: 100vh;
  width: 100vw;
  background: #4388ec;
  position: relative;
  .login-form {
    width: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 4px;
    padding: 10px;
    .check-code-input {
      .img-code {
        display: inline-block;
        width: 100px;
        height: 20px;
      }
    }
  }
}
</style>
